
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

	<canvas id="myCanvas" onmouseover="weizhi(event);" width="300" height="30" style="border:1px solid #d3d3d3;"> <!--这里可以设置背景色-->
		Your browser does not support the HTML5 canvas tag.
	</canvas>

	<script>

		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");

    	function weizhi(e){
    	while(0<getCanvasPos(c,e).x&&getCanvasPos(c,e).x<350){
    			if(0<getCanvasPos(c,e).x&&getCanvasPos(c,e).x<50){
    			console.log("1");
    			}
    		if(50<getCanvasPos(c,e).x&&getCanvasPos(c,e).x<100){
    			console.log("2");
    		}
    		if(100<getCanvasPos(c,e).x&&getCanvasPos(c,e).x<150){
    			console.log("3");
    		}
    		if(150<getCanvasPos(c,e).x&&getCanvasPos(c,e).x<200){
    			console.log("4");
    		}
    		if(200<getCanvasPos(c,e).x&&getCanvasPos(c,e).x<250){
    			console.log("5");
    		}
    		if(250<getCanvasPos(c,e).x&&getCanvasPos(c,e).x<300){
    			console.log("6");
    		}
    		if(300<getCanvasPos(c,e).x&&getCanvasPos(c,e).x<350){
    			console.log("7");
    		}
    	 }
    	}


		// ctx.translate(70,70);重置零点位置，但是画布的位置，没有变化，画布的位置要用定位或者浮动来调

		//这些数据是变化的，随着时间发生变化，数据来自后台，一段是一个数组，状态条是由多段组成的，一个状态条的数据放在一个二维的数组中
		//每一段的数据

		drawReact(ctx,0,0,50,30,1);
		drawReact(ctx,50,0,50,30,2);
		drawReact(ctx,100,0,50,30,3);
		drawReact(ctx,150,0,50,30,1);
		drawReact(ctx,200,0,50,30,2);
		drawReact(ctx,250,0,50,30,3);
		drawReact(ctx,300,0,50,30,3);

		//画矩形的函数，五个参数，上下文对象，矩形的起始位置，宽，高，状态
		function drawReact(ele,x,y,	rectWidth,rectHeight,stsNum) {  
			if(stsNum==1){//正常
				ele.fillStyle="green";
			}

			if(stsNum==2){//警报
				ele.fillStyle="yellow";
			}

			if(stsNum==3){//危险
				ele.fillStyle="red";
			}

			ele.fillRect(x,y,rectWidth,rectHeight);
		}

		function getCanvasPos(canvas,e)  
	{//获取鼠标在canvas上的坐标  
		// 用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left,width,height等属性
		var rect = canvas.getBoundingClientRect();   
		return {   
			x: e.clientX - rect.left * (canvas.width / rect.width),  
			y: e.clientY - rect.top * (canvas.height / rect.height)  
		};  
	}  
		//怎么获得一个canvas中的不同元素，不同区域块？
	</script> 
</body>
</html>